<template>
  <div class="table-tree" id="tableTree">
    <el-table
      :data="dataList"
      size="mini"
      class = 'call-table'
      :row-style="showTr"
      :row-class-name="rowClassName"
      border>
       <el-table-column
        :label="this.$t('config.channel.satisfactionOption')"
        class="label-name">
        <template scope="scope">
          <span @click.stop="showLabel(scope.$index, scope.row)" v-show="scope.row._level === 1" :class="{'paddelvel2': scope.row._level === 2}" v-if="supportLevel2">
            <i v-if="!scope.row._expanded" class="icon iconfont icon-zhankai"></i>
            <i v-if="scope.row._expanded" class="icon iconfont icon-zuixiaohua"></i>
          </span>
          <span :class="{'paddelvel2': scope.row._level === 2}" class="lab-name" >{{scope.row._level === 2 ? scope.row.displayName : scope.row.name }}</span>
          <span v-if="scope.row.status && scope.row._id" :class = "{is_error: scope.row.stopSave==true}">
            <el-input v-focus
                      v-model.trim="scope.row.name"
                      class="label-input"
                      @blur = "boxBlur1(scope.row)"></el-input>
          </span>
          <span v-show="scope.row.status && !scope.row._id" :class = "{is_error: scope.row.stopSave==true}">
            <el-input v-model.trim="scope.row.name"
                      class="label-input"></el-input>
            <div style="display: inline-block">
              <!--<span @click.stop="handleChannel(scope.$index, scope.row)">取消</span>-->
              <span class="delete" @click.stop="handleChannel(scope.$index, scope.row)">
                  <i class="el-icon-close"></i>
              </span>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('public.operate')">
        <template scope="scope">
          <div v-show="scope.row.name || scope.row.key" class="operate-btn">
            <span @click.stop="handleEdit(scope.$index, scope.row)" v-show="scope.row._level === 1" class="padding-r-10 cursor" v-if="supportLevel2">{{$t('config.channel.addTowSatisfaction')}}</span>
            <span @click.stop="handleEdit(scope.$index, scope.row)" class="padding-r-10 cursor" v-show="scope.row._level === 1">{{$t('public.edit')}}</span>
            <span @click.stop="handleDel(scope.$index, scope.row)" v-show="!scope.row._parent"><span class="cursor is_stopBtn" >{{$t('public.delete')}}</span></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'tableTree',
    data () {
      return {
        defaultExpandAll: false
      }
    },
    props: {
      tableData: {
        type: Array,
        default: []
      },
      tableHeader: {
        type: Array,
        default: []
      },
      supportLevel2: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      dataList () {
        let me = this
        let data = this.treeToArray(me.tableData, null, null, me.defaultExpandAll)
        return data
      }
    },
    methods: {
      rowClassName ({row, index}) {
        return row._parent ? row._parent : ''
      },
      showLabel (index, row) {
        let me = this
        let record = me.dataList[index]
        record._expanded = !record._expanded
        this.$emit('updata', record)
        this.showTree(record)
      },
      showTr (row, index) {
        let show = (row.row._parent ? row.row.show : true)
        return show ? '' : 'display:none;'
      },
      treeToArray (data, parent, level, expandedAll) {
        let tmp = []
        let that = this
        Array.from(data).forEach(function (record) {
          if (record._expanded === undefined) {
            that.$set(record, '_expanded', expandedAll)
          } else {
            that.$set(record, '_expanded', record._expanded)
          }
          if (parent) {
            let _parent = parent.key
            that.$set(record, '_parent', _parent)
          }
          let _level = 1
          if (level !== undefined && level !== null) {
            _level = level + 1
          }
          that.$set(record, '_level', _level)
          tmp.push(record)
          if (record.children && record.children.length > 0) {
            let children = that.treeToArray(record.children, record, _level, expandedAll)
            tmp = tmp.concat(children)
          }
        })
        return tmp
      },
      showTree (record) {
        let style = record._expanded ? '' : 'none'
        let dom = document.getElementsByClassName(record.key)
        if (dom && dom.length > 0) {
          Array.from(dom).forEach(item => {
            item.style.display = style
          })
        }
      },
      showTreeList (data) {
        Array.from(data).forEach(item => {
          if (!item._parent) {
            let style = item._expanded ? '' : 'none'
            let dom = document.getElementsByClassName(item.key)
            Array.from(dom).forEach(domItem => {
              domItem.style.display = style
            })
          }
        })
      },
      handleEdit (index, val) {
        if (this.supportLevel2) {
          val._expanded = true
          this.showTree(val)
        }
        this.$emit('updata', val)
      },
      handleDel (index, val) {
        if (!val._parent) {
          this.$emit('del', val)
        } else {
          this.$emit('delChild', val)
        }
      }
    },
    watch: {
      dataList (val) {
        this.$nextTick(() => {
          this.showTreeList(val)
        })
      }
    },
    beforeMount () {},
    mounted () {}
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .el-table
    border-right 0
    border-left 0
    td
      border-right 0
    th
      border-right 0  
  .el-table--group::after, .el-table--border::after
    width 0
  .call-table
    .lab-name
      margin-left: 10px;
      max-width: 20em;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    .paddelvel2
      padding-left 21px
    .paddelvel3
      padding-left 36px
    .is_stop
      color #ff9100
    .padding-r-10
      padding-right 10px
    .operate-btn
      color $c-main
    .is_stopBtn
      color $c-pink
    .cursor
      cursor pointer
    .iconfont
      color #878787  
    .icon-zhankai
      cursor pointer
    .icon-zuixiaohua
      cursor pointer
    .label-input
      width: 170px
      display:inline-block
      padding-left: 5px
    .delete
      color $c-pink
      padding-left 10px
      vertical-align middle
</style>